<template>
    <div class="user-item-one-wrapper">
        <div class="tab-list">
            <div
                class="tab-item"
                v-for="item in tabList"
                :key="item.name"
                :class="{ 'tab-item-active': activeName === item.pathName }"
                @click="handleClickTab(item.pathName)"
            >
                {{ item.name }}
            </div>
        </div>
        <router-view v-slot="{ Component }">
            <keep-alive include="applyItemOneChildOne,applyItemOneChildTwo">
                <component :is="Component" :key="route.fullPath" />
            </keep-alive>
        </router-view>
    </div>
</template>
<script lang="ts">
export default {
    name: 'applyItemOne'
};
</script>
<script lang="ts" setup>
import { ref, onMounted, onActivated, onUnmounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import type { TabsPaneContext } from 'element-plus';
const router = useRouter();
const route = useRoute();
const activeName = ref('applyItemOneChildOne');
const tabList = ref([
    { name: '用户管理', pathName: 'applyItemOneChildOne' },
    { name: '配置管理', pathName: 'applyItemOneChildTwo' },
    { name: '系统管理', pathName: 'applyItemOneChildThree' }
]);
const hightLightTab = () => {
    const { name } = route;
    activeName.value = name as string;
};
onMounted(() => {
    console.log('onMounted-userItemOne');
    hightLightTab();
});
onActivated(() => {
    console.log('onActivated-userItemOne');
    hightLightTab();
});
const handleClickTab = (pathName: string) => {
    if (activeName.value === pathName) {
        return;
    }
    const target = tabList.value.find((tab) => tab.pathName === pathName);
    if (target) {
        activeName.value = target.pathName;
        router.push({
            name: target.pathName
        });
    }
};
</script>

<style lang="scss" scoped>
.tab-list {
    display: flex;
    margin-bottom: 15px;
    border-bottom: 1px solid #ccc;
    .tab-item {
        cursor: pointer;
        padding: 5px 15px;
        box-sizing: border-box;
        border: 1px solid #ccc;
        border-right: none;
        border-bottom: none;
        &:last-child {
            border-right: 1px solid #ccc;
        }
        &:hover {
            color: var(--side-menu-bg-color);
        }
    }
    .tab-item-active {
        background-color: var(--side-menu-bg-color);
        color: #fff;
        &:hover {
            color: #fff;
        }
    }
}
.fade-transform {
    &-enter-from {
        transform: translateX(30px);
        opacity: 0;
        background: #ed16ed;
    }
    &-enter-to {
        opacity: 1;
    }
    &-leave-from {
        opacity: 1;
    }
    &-leave-to {
        opacity: 0;
    }
    &-enter-active {
        transition: all 0.7s ease;
    }
    &-leave-active {
        transition: all 0.3s cubic-bezier(1, 0.6, 0.6, 1);
    }
}
</style>
